<script setup>
import { ref } from "vue"
import { invoke } from "@tauri-apps/api/core"
import { isPermissionGranted, requestPermission, sendNotification } from "@tauri-apps/plugin-notification"

const greetMsg = ref("")
const name = ref("")

async function greet() {
    // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
    greetMsg.value = await invoke("greet", { name: name.value })
    // 你有发送通知的权限吗？
    let permissionGranted = await isPermissionGranted()

    // 如果没有，我们需要请求它
    if (!permissionGranted) {
        const permission = await requestPermission()
        permissionGranted = permission === "granted"
    }

    // 一旦获得许可，我们就可以发送通知
    if (permissionGranted) {
        sendNotification({ title: "Tauri", body: "Tauri is awesome!" })
    }
}
</script>

<template>
    <main class="container">
        <h1>Welcome to Tauri + Vue</h1>

        <div class="row">
            <a href="https://vitejs.dev" target="_blank">
                <img src="/vite.svg" class="logo vite" alt="Vite logo" />
            </a>
            <a href="https://tauri.app" target="_blank">
                <img src="/android-chrome-512x512.png" class="logo tauri" alt="Tauri logo" />
            </a>
            <a href="https://vuejs.org/" target="_blank">
                <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
            </a>
        </div>
        <p>Click on the Tauri, Vite, and Vue logos to learn more.</p>

        <form class="row" @submit.prevent="greet">
            <input id="greet-input" v-model="name" placeholder="Enter a name..." />
            <button type="submit">Greet</button>
        </form>
        <p>{{ greetMsg }}</p>
    </main>
</template>
